<template>
  <div class='shoppingCart'>
    <div class="cart-tabbar">
       <div class="left"><span class="checked_style" :class="{ checked_on : isChecked}"><input type="checkbox" class="radioclass" :value='value' v-model='checkall' @change='check_all()'></span>
         <span>全选</span>
       </div>
      <div class="right">
     <span>5544583.685</span><button @click='add'>确定</button>
      </div>
    </div>
    <div class="info" v-for='(item,key) in message' :key='key'>
      <div class="info-merchant"  v-for='item2 in item.shop'>
        <span class="checked_style" :class="{ checked_on : isChecked}"
              @click="isChecked = !isChecked;value=isChecked"><input type="checkbox" class="radioclass" :value='value'></span><router-link :to="{path:'/stylist_shop',query:{ id:item2.shop_id }}" tag='div' ><img
              :src="item2.shop_logo" alt=""><span>{{item2.shop_name}}</span></router-link>
      </div>
      <div class="info-details" v-for='(item1,key1) in item.son' :key='key1'>
        <div class="left">
          <div class="message-left">
            <span class="checked_style checked_style1" >
            <input type="checkbox" class="radioclass" :value='value' :class="{ checked_on : true}"
                   @click="addCart(item1.cart_id)"></span>
            <img class="img" :src="item1.cover_url" alt="">
          </div>
          <router-link tag='div' :to="{path:'/product_details',query:{ id:item1.goods_id }}" class="message-right">
            <p>{{item1.title}}</p>
            <p>{{item1.option}}</p>
            <strong>{{item1.price}}</strong>
          </router-link>
          <div class="clearfix"></div>
        </div>
        <div class="right"> <div class='num'> <input type="button" value="-"> <input type="tel" value="1">
            <input type="button" value="+">
          </div>
          <button type="danger" class="">删除</button>
        </div>
      </div>
    </div>
    <div class="cb"></div>
    <div class="footer">
      <p>暂无更多</p>
    </div>
  </div>
</template>
<script typy="text/ecmascript-6">
  export default{
    data () {
      return {
        value: 0,
        isChecked: false,
        message:'',
          arr:[],
          cart_id:[],
      }
    },
      created () {
        const that = this;
        const url = that.getUrl('cart/list');
        const params = {
            token:that.getToken()
        }
        that.$http.post(url,params,{emulateJSON: true}).then( res =>{
            if(res.data.code === 0){
                that.message = res.data.data;
            }else {
                that.$messagebox('提示', res.data.errMsg);
            }
        }, err =>{
            that.$messagebox('提示', '找不到服务器，请稍后尝试');
        })
      },
      methods:{
        addCart(val){
            const that = this;
            let obj11 = parseInt(val);
            that.arr.push(val);
            var arr1 = [];
            let obj1 = {};
            for(var i=0;i<that.arr.length;i++) {
                if (!obj1[that.arr[i]]) {
                    obj1[that.arr[i]] = true;
                    arr1.push(that.arr[i])
                }
            }
            console.log(arr1);
            that.cart_id = arr1;
            console.log(that.cart_id );
        },
          add () {
            const that = this;
            const url = that.getUrl('order/cart_add');
            let params = {
                token:that.getToken(),
                cart_id:that.cart_id
            }
            that.$http.post(url,params,{emulateJSON: true}).then(res => {
//                if(res.data.code === 0){
//                    console.log(res.data.data);
//                }else {
//                    that.$messagebox('提示', res.data.errMsg);
//                }
                console.log(res.data.data);
            },err =>{})
          }

      }
  }
</script>
<style  lang="less" rel="stylesheet/less">
  @import "../../lib/less/variable";
  @import "../../lib/less/normalize";
  .shoppingCart {
    width: 100%;
    height: 100%;
    .info {
       background: #fff;
      .info-merchant {
        .h(55);
        .lh(47);
        border-bottom: 1px solid #ccc;
        border-top: 6px solid #f4f4f4;
        img {
          border-radius: 50%;
          vertical-align: middle;
          .h(40);
          .w(40);
          .ml(10);
          .mr(10);
        }
        span {
          .fs(14);
          font-weight: bold;
        }
      }
      .info-details {
        .h(100);
        width: 100%;
        box-sizing: border-box;
        .mt(10);
        .left {
          width: 60%;
          height: 100%;
          display: inline-block;
          vertical-align:top;
          .message-left {
            float: left;
            box-sizing: border-box;
            .pt(12);
            width: 60%;
            .checked_style1{
              .mt(25);
            }
            @media screen and (max-width: 320px){
              .img{
                .w(60);
                .h(60);
                .ml(10);
              }
            }
            img {
              .w(80);
              .h(80);
            }
          }

          .message-right {
            width: 40%;
            float: left;
            vertical-align: top;
            box-sizing: border-box;
            .pt(20);
            p{
             display:block;             /*内联对象需加*/
              word-break:keep-all;       /* 不换行 */
              white-space:nowrap;        /* 不换行 */
              overflow:hidden;           /* 内容超出宽度时隐藏超出部分的内容 */
              text-overflow:ellipsis;    /*溢出时显示省略标记...；需与overflow:hidden;一起使用*/
              .fs(14);
              color: #666;
              font-weight: 400;
            }
            strong{
              color: #0F7ADA;
              .fs(16)
            }
            strong:before{
              content: "￥";
            }
          }
        }
        .right {
          width: 38%;
          height: 100%;
          display: inline-block;
          text-align: right;
          box-sizing: border-box;
          .pt(20);

          .num{
            text-align: center;
            display: inline-block;
            input{
              .w(30);
              .h(30);
              background: none;
              border:1px solid #ccc;
              text-align: center;
              display: inline-block;
            }
            input[type='tel']{
              .w(60);
              .h(28);
            }
          }
          button{
            .w(45);
            .h(25);
            .mt(5);
            background-color:#0F7ADA;
            color: #fff;
            border: none;
            border-radius: 3px;
          }
        }
      }
    }
    .info:first-child  .info-merchant{
      border-top: none;
    }
    /*input:check样式*/
    .checked_style {
      .w(22);
      .h(20.5);
      float: left;
      .mt(15);
      .ml(10);
      cursor: pointer;
      text-align: center;
      background-image: url(../images/checkbox_01.gif);
      background-repeat: no-repeat;
      background-position: 0px 0px;
      .radioclass {
        opacity: 0;
        cursor: pointer;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        float: left;
        .ml(5);
        .mt(3)
      }
    }
    .checked_on {
      background-position: 0 -21px;
    }
    .info:last-child .info-details:last-child{
      .mb(90);
    }
  ;
    .cart-tabbar{
      width: 100%;
      .h(40);
      .lh(40);
      position:fixed;
      .bottom(50);
      .left(0);
      .right(0);

      .left{

        float: left;
        span{
          vertical-align: top;
          .fs(14);
          font-weight: bold;
          .pl(10)
        }

      }
      .right{
        text-align: right;
        display: inline-block;
         float: right;
        .mr(70);
        span{
        vertical-align: middle;
          color: #0F7ADA;
          .fs(16);
          font-weight: bold;
        }
        span:before{
          content: "￥";
        }
        button{
          .w(60);
          .h(40);
          .lh(38);
          color: #fff;
          background-color: #0F7ADA;
          border: none;
          position: fixed;
          right: 0;
          box-sizing: border-box;



        }
      }
      background: #fff;
      .checked_style{
        .mt(10);
      }
    }
  }
</style>
